<template>
  <div>
    <!-- 头部导航栏 -->
    <van-nav-bar
      title="我的订单"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- Tab标签页 -->
    <van-tabs v-model="active" @click="onClick">
      <van-tab title="全部" name="all"></van-tab>
      <van-tab title="待支付" name="payment"></van-tab>
      <van-tab title="待发货" name="delivery"></van-tab>
      <van-tab title="待收货" name="received"></van-tab>
      <van-tab title="待评价" name="comment"></van-tab>
    </van-tabs>
    <!-- 主体部分 -->
    <van-empty description="亲，暂无订单记录" v-if="orderGoods.length === 0"/>
    <div v-else>
      <MyOrderGoodBase v-for="item in orderGoods" :key="item.order_id" :item=item></MyOrderGoodBase>
    </div>
  </div>
</template>

<script>
import MyOrderGoodBase from '@/components/MyOrderGoodBase.vue'
import { getMyOrder } from '@/api/submitOrder.js'
export default {
  name: 'myOrder',
  created () {
    // 获取我的订单
    this.getMyOrder()
  },
  data () {
    return {
      active: 'all', // 选项卡状态
      orderGoods: [] // 订单商品的详细信息
    }
  },
  methods: {
    // Tab标签点击事件
    onClick (name, title) {
      this.$router.replace({
        path: '/orderManage',
        query: {
          dataType: name
        }
      })
      this.getMyOrder()
    },
    // 获取我的订单
    async getMyOrder () {
      const dataType = this.$route.query.dataType || 'all'
      // console.log(dataType)
      const { data: { list: { data } } } = await getMyOrder(dataType)
      this.orderGoods = data
      console.log(data)
    }
  },
  components: {
    MyOrderGoodBase
  }
}
</script>

<style>

</style>
